<template>
    <div class="radar-chart">
        <canvas ref="chartCanvas"></canvas>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import {
    Chart as ChartJS,
    RadialLinearScale,
    PointElement,
    LineElement,
    Filler,
    Tooltip,
    Legend,
    type ChartConfiguration
} from 'chart.js'

// 注册 Chart.js 组件
ChartJS.register(
    RadialLinearScale,
    PointElement,
    LineElement,
    Filler,
    Tooltip,
    Legend
)

interface RadarDataset {
    label: string
    data: number[]
    backgroundColor: string
    borderColor: string
    borderWidth: number
    pointBackgroundColor: string
    pointBorderColor: string
    pointBorderWidth: number
}

interface RadarData {
    labels: string[]
    datasets: RadarDataset[]
}

interface Props {
    data: RadarData | null
    options?: Partial<ChartConfiguration<'radar'>['options']>
}

const props = withDefaults(defineProps<Props>(), {
    options: () => ({})
})

const chartCanvas = ref<HTMLCanvasElement | null>(null)
let chartInstance: ChartJS<'radar'> | null = null

const defaultOptions: ChartConfiguration<'radar'>['options'] = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            position: 'bottom',
            labels: {
                padding: 20,
                usePointStyle: true,
                font: {
                    size: 12
                }
            }
        },
        tooltip: {
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            titleColor: '#fff',
            bodyColor: '#fff',
            borderColor: '#1989fa',
            borderWidth: 1,
            cornerRadius: 8,
            displayColors: true,
            callbacks: {
                label: (context: any) => {
                    return `${context.dataset.label}: ${context.parsed.r}/10`
                }
            }
        }
    },
    scales: {
        r: {
            beginAtZero: true,
            min: 0,
            max: 10,
            ticks: {
                stepSize: 2,
                font: {
                    size: 10
                },
                color: '#969799',
                backdropColor: 'transparent'
            },
            grid: {
                color: '#ebedf0',
                lineWidth: 1
            },
            angleLines: {
                color: '#ebedf0',
                lineWidth: 1
            },
            pointLabels: {
                font: {
                    size: 12,
                    weight: '500'
                },
                color: '#323233',
                padding: 10
            }
        }
    },
    elements: {
        point: {
            radius: 4,
            hoverRadius: 6
        },
        line: {
            borderWidth: 2,
            tension: 0.1
        }
    },
    interaction: {
        intersect: false,
        mode: 'point'
    }
}

const createChart = () => {
    if (!chartCanvas.value || !props.data) return

    const config: ChartConfiguration<'radar'> = {
        type: 'radar',
        data: props.data,
        options: {
            ...defaultOptions,
            ...props.options
        }
    }

    chartInstance = new ChartJS(chartCanvas.value, config)
}

const updateChart = () => {
    if (!chartInstance || !props.data) return

    chartInstance.data = props.data
    chartInstance.update('none')
}

const destroyChart = () => {
    if (chartInstance) {
        chartInstance.destroy()
        chartInstance = null
    }
}

// 监听数据变化
watch(() => props.data, (newData: RadarData | null) => {
    if (newData) {
        if (chartInstance) {
            updateChart()
        } else {
            nextTick(() => {
                createChart()
            })
        }
    }
}, { deep: true })

// 监听选项变化
watch(() => props.options, () => {
    destroyChart()
    nextTick(() => {
        createChart()
    })
}, { deep: true })

onMounted(() => {
    nextTick(() => {
        createChart()
    })
})

onUnmounted(() => {
    destroyChart()
})
</script>

<style lang="scss" scoped>
.radar-chart {
    position: relative;
    width: 100%;
    height: 100%;

    canvas {
        max-width: 100%;
        max-height: 100%;
    }
}
</style>